<template>
  <div class="reach-me">
    <div class="reach-our" @click="clickhander">
      <img class="tel" :src="tel" alt="">
      <div class="text">联系我们</div>
    </div>
    <div class="mask" v-if="show">
      <div class="tips">长按识别二维码咨询免费试用</div>
      <img class="qr-code" :src="qrCode" alt="">
      <div class="tel-bg">
        <img class="phone-fill" :src="phoneFill" alt="">
        <a class="phone" href="tel:156-1890-8036">156-1890-8036</a>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import tel from '~/assets/home/tel.png'
import phoneFill from '~/assets/home/phone-fill.png'
import qrCode from '~/assets/home/qr-code.png'
let show = ref(false)
let clickhander = () => {

  show.value = !show.value

}
</script>

<style lang="stylus" scoped>
@import '~/styles/common.styl';
.reach-me
  position fixed
  right -4px
  bottom 24px
.reach-our
  {flexBoxColumn}
  width 88px
  height 88px
  background linear-gradient(360deg, #FFA654 0%, #FF821E 100%)
  box-shadow 0px 7px 27px 0px rgba(226, 226, 235, 0.8)
  border-radius 16px
  transform scale(0.5)
  .text
    font-size 16px
    font-weight 500
    color #FFFFFF
    line-height 22px
    margin-top 8px
  .tel
    width 36px
    flex-shrink 0
.mask
  {flexBoxColumn}
  justify-content flex-start
  position fixed
  left 50%
  bottom 48px
  transform translateX(-50%)
  width 220px
  background #FFFFFF
  box-shadow 0px 11px 41px 0px rgba(225, 225, 234, 0.7)
  border-radius 12px
  padding-top 16px
  .tips
    font-size 12px
    font-weight 400
    color #393F56
    line-height 17px
  .qr-code
    width 180px
    margin-top 4px
  .tel-bg
    {flexBox}
    width 220px
    height 68px
    background url('../../../assets/home/tel-bg.png') no-repeat
    background-size 100% 100%
    padding-top 10px
    .phone-fill
      width 21px
    .phone
      font-size 18px
      font-family HelveticaNeue-Medium, HelveticaNeue
      font-weight 500
      color #393F56
      line-height 23px
      margin-left 12px


</style>